<template>
  <!--  <div>聚焦，失焦</div>-->
  <div ref="scroll" class="scrollBox box" v-scrollBox>
    <div v-for="i in 8" :key="i">
      <a @click="aClick(i)">{{ i }}</a>
    </div>
  </div>

</template>

<script setup>
import {getCurrentInstance, onMounted, onUnmounted, reactive, watch, ref} from 'vue'

const {proxy} = getCurrentInstance()

function aClick(i) {
  console.log(i)
}

onMounted(() => {
})

</script>

<style lang="scss" scoped>
.box {
  width: 200px;
  height: 100px;
  background-color: rgba(245 245 255 / 1)
}

.scrollBox {
  $size: 4px;
  margin-right: 1px;
  overflow: auto;

  &::-webkit-scrollbar {
    width: $size;
    height: 1px;
    display: none;
  }
}

</style>
